<template>
  <div class="search">
    <!-- 头部导航 -->
    <div class="header">
      <van-nav-bar
        title="搜索中心"
        left-arrow
        @click-left="$router.back()"
      />
    </div>
    <div class="search-box">
      <!-- 搜索框 -->
      <van-search
        v-model.trim="value"
        :use-action-slot="true"
        shape="round"
        show-action
        placeholder="请输入搜索关键词"
        @search="searchKeyword(value)"
        @input="changeKeyword"
      >
        <!-- 搜索框右侧插槽 -->
        <template #action>
          <span @click="searchKeyword(value)">搜索</span>
        </template>
      </van-search>
    </div>
    <div class="main">
      <!-- 历史记录 -->
      <div v-if="!value&&histories.length>0" class="histories">
        <van-cell-group>
          <van-cell
            title="历史记录"
          />
          <van-cell
            v-for="(item,index) in histories"
            :key="index"
            :title="item"
            @click="searchKeyword(item)"
          >
            <template>
              <van-icon name="close" @click.stop="delHistory(index)" />
            </template>
          </van-cell>
        </van-cell-group>
      </div>
      <van-empty v-else-if="!value&&histories.length===0" image="search" description="暂无搜索记录" />
      <!-- 联想建议 -->
      <div v-else class="suggestions">
        <van-cell-group>
          <van-cell
            v-for="(item,index) in suggestions"
            :key="item"
            icon="search"
            @click="searchSuggestion(index)"
          >
            <template #title>
              <div class="text" v-html="item" />
            </template>
          </van-cell>
        </van-cell-group>
      </div>
    </div>
  </div>
</template>

<script>
import { getSuggestions } from '@/api/search'
import { setLocalHistories, getLocalHistories } from '@/utils/storage'
export default {
  name: 'Search',
  data() {
    return {
      value: null,
      options: [], // 联系建议原始数据
      histories: [],
      timer: null

    }
  },
  computed: {
    suggestions: {
      get() {
        const reg = new RegExp(this.value, 'ig')
        return this.options.map(val => val.replace(reg, item => `<span style="color:red">${item}</span>`))
      }
    }
  },
  created() {
    this.histories = getLocalHistories() || []
  },
  methods: {
    // 输入中
    changeKeyword() {
      if (!this.value) return
      clearTimeout(this.timer)
      this.timer = setTimeout(async() => {
        const res = await getSuggestions(this.value)
        this.options = res.data.options
        console.log(this.options)
      }, 500)
    },

    // 确定搜索
    searchKeyword(val) {
      if (!val) return
      console.log(val)
      !this.histories.some(item => item === val) && this.histories.push(val) && setLocalHistories(this.histories)
      this.$router.push({
        path: '/result',
        query: { keyword: val }
      })
    },

    // 点击联想建议
    searchSuggestion(index) {
      this.searchKeyword(this.options[index])
    },

    // 点击删除历史
    delHistory(index) {
      this.histories.splice(index, 1)
      setLocalHistories(this.histories)
    }
  }
}
</script>

<style lang="scss" scoped>
.van-nav-bar {
  ::v-deep {
    .van-nav-bar__title {
      letter-spacing: normal;
    }
  }
}
.van-search {
  border-bottom: 1px solid #eff1f3;
}

</style>
